<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!--Open Sans Font [ OPTIONAL ] -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet"/>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link th:href="@{/static/nifty/css/bootstrap.min.css}" rel="stylesheet">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link th:href="@{/static/nifty/css/nifty.min.css}" rel="stylesheet">
    <!--Themify Icons [ OPTIONAL ]-->
    <link th:href="@{/static/nifty/themify-icons/themify-icons.min.css}" rel="stylesheet"/>
    <!--JAVASCRIPT-->
    <!--=================================================-->
    <!--Page Load Progress Bar [ OPTIONAL ]-->
    <link th:href="@{/static/nifty/css/pace.min.css}" rel="stylesheet"/>
    <script th:src="@{/static/nifty/js/pace.min.js}"></script>
    <!--jQuery [ REQUIRED ]-->
    <script th:src="@{/static/nifty/js/jquery-2.2.4.min.js}"></script>
    <!--BootstrapJS [ RECOMMENDED ]-->
    <script th:src="@{/static/nifty/js/bootstrap.min.js}"></script>
    <!--Nifty Admin [ RECOMMENDED ]-->
    <script th:src="@{/static/nifty/js/nifty.min.js}"></script>
    <style>
        .bg-img ~ .cls-content .panel{
            background-color: rgba(255,255,255,0.6);
            border-radius: 50px;
        }
        .cls-content {padding-top: 20vh;}
        .panel-body {
            padding: 15px 25px 25px;
        }
    </style>
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
<div id="container" class="cls-container">

    <!-- BACKGROUND IMAGE -->
    <!--===================================================-->
    <div id="bg-overlay" class="bg-img" style="background-image: url(/static/nifty/img/bg-img-3.jpg)"></div>
    <!-- LOGIN FORM -->
    <!--===================================================-->
    <div class="cls-content">
        <div class="cls-content-sm panel">
            <div class="panel-body">
                <div class="mar-ver pad-btm">
                    <h3 class="h4 mar-no">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</h3>
                </div>
                <form th:action="@{/login}" method="post">
                    <div class="form-group">
                        <input type="text" th:name="username" class="form-control" placeholder="用户登录账号" autofocus/>
                    </div>
                    <div class="form-group">
                        <input type="password" th:name="password" class="form-control" placeholder="用户登录密码"/>
                    </div>
                    <button class="btn btn-primary btn-lg btn-block" type="submit">登录</button>
                </form>
            </div>

            <div class="pad-all">
                <a href="#" class="btn-link mar-rgt">重置密码</a>
                <a href="#" class="btn-link mar-lft">用户注册</a>

                <div class="media pad-top bord-top">
                    <div class="pull-right">
                        <a href="#" class="pad-rgt"><i class="ti-facebook icon-lg text-primary"></i></a>
                        <a href="#" class="pad-rgt"><i class="ti-twitter-alt icon-lg text-info"></i></a>
                        <a href="#" class="pad-rgt"><i class="ti-google icon-lg text-danger"></i></a>
                    </div>
                    <div class="media-body text-left">
                        第三方登录
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
</body>
</html>
